// 首页

import React, { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

import styles from './home.module.css';
import { Outlet } from 'react-router-dom';
import { Button, Modal, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

import logo1 from './avatars/logo1.png'
import logo2 from './avatars/logo2.png'
import usertx from './avatars/usertx.png'
import axios from 'axios';




export default function Home() {
  const navigate = useNavigate();
  let [stop, setStop] = useState(true);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 上传文件到后端
  const handleUpload = async (options) => {
    // console.log(options);

    let res = await axios.post('http://localhost:3000/upload', options);
    console.log(res);
    
    if (res.status === 200) {
      message.success('上传成功');
      setIsModalOpen(false);
    } else {
      message.error('上传失败');
      setIsModalOpen(false);
    }

  }

  const navigateTo = (path) => {
    console.log(path);

    navigate(path);
  }


  const props = {
    action: 'http://localhost:3000/upload',
    onChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        console.log(file, fileList);
        handleUpload(file);

      }
    },
    defaultFileList: [
      // {
      //   uid: '1',
      //   name: 'xxx.png',
      //   status: 'uploading',
      //   url: 'http://www.baidu.com/xxx.png',
      //   percent: 33,
      // },
      // {
      //   uid: '2',
      //   name: 'yyy.png',
      //   status: 'done',
      //   url: 'http://www.baidu.com/yyy.png',
      // },
      // {
      //   uid: '3',
      //   name: 'zzz.png',
      //   status: 'error',
      //   response: 'Server Error 500', // custom error message to show
      //   url: 'http://www.baidu.com/zzz.png',
      // },
    ],
  };



  useEffect(() => {
    if (stop) {
      navigate('/home/panel');
      setStop(false);
    }
  })
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <div className={styles.logo}>
          <img src={logo1} alt="云文件" />
          <h1>云文件</h1>
        </div>
        <div className={styles.search}>
          <input type="text" placeholder="输入关键字搜索" />
        </div>
        <div className={styles.actions}>
          {/* 点击按钮打开模态框  */}
          <button className={styles.uploadButton} onClick={showModal} >上传文件</button>
          <img src={usertx} alt="用户头像" className={styles.avatar} onClick={() => navigate('/my')} />
          <span>Koto</span>
        </div>
      </header>

      <div className={styles.content}>
        <aside className={styles.sidebar}>
          <button className={styles.dashboardButton} onClick={() => { navigateTo('/home/panel'); }}>
            <span className={styles.icon}>⊞</span>
            仪表盘
          </button>
          <nav>
            <ul>
              <li onClick={() => { navigateTo('/home/textFile'); }}>
                <span className={styles.icon} >📄</span>
                文件
              </li>
              <li onClick={() => { navigateTo('/home/imageFile'); }}>
                <span className={styles.icon} >🖼️</span>
                图像
              </li>
              <li onClick={() => { navigateTo('/home/videoFile'); }}>
                <span className={styles.icon} >🎥</span>
                视频、音频
              </li>
              <li onClick={() => { navigateTo('/home/otherFile'); }}>
                <span className={styles.icon} >📁</span>
                其他
              </li>
            </ul>
          </nav>
        </aside>
        {/* 上传文件模态窗 */}
        <Modal title="请选择要上传的文件" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          {/* 选择多个文件，并且预显 */}
          {/* <input type="file" multiple /> */}
          <Upload {...props}>
            <Button icon={<UploadOutlined />} >Upload</Button>
          </Upload>
          {/* <Button type="primary">上传</Button> */}
        </Modal>
        <Outlet />
      </div>

    </div>
  );
}
